<template>
  <van-form @submit="onSubmit">
    <!-- 文章标题 -->
    <van-field
      v-model="formData.title"
      name="title"
      label="文章标题"
      placeholder="请输入文章内容"
      :rules="[{ required: true, message: '请输入文章内容' }]"
    />
    <!-- 文章分类 -->
    <van-field
      readonly
      clickable
      name="picker"
      :value="value"
      label="文章分类"
      placeholder="请选择文章分类"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="newCateName"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <van-field
      readonly
      clickable
      name="picker"
      :value="checkboxGroup"
      label="文章标签"
      placeholder="请选择文章标签"
      @click="showPicker2 = true"
    />
    <van-popup
      v-model="showPicker2"
      position="bottom"
      close-icon="close"
      :style="{ height: '30%' }"
      closeable
    >
      <div class="tags-popup">
        <h3>请选择标签</h3>
        <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
          <van-checkbox
            v-for="item in allTagList"
            :key="item.id"
            :name="item.tagname"
            shape="square"
            >{{ item.tagname }}</van-checkbox
          >
        </van-checkbox-group>
      </div>
    </van-popup>
    <van-field name="uploader" label="文件上传">
      <template #input>
        <van-uploader
          v-model="uploader"
          :max-count="1"
          :after-read="afterRead"
        />
      </template>
    </van-field>
    <van-field
      v-model="formData.content"
      name="content"
      rows="4"
      autosize
      label="文章正文"
      type="textarea"
      placeholder="请输入正文内容"
    />
    <br /><br />
    <van-row type="flex" justify="space-around">
      <van-button icon="plus" type="primary" @click="formData.status = 2"
        >发布</van-button
      >
      <van-button icon="send-gift-o" type="info" @click="formData.status = 1"
        >存草稿</van-button
      >
      <van-button
        icon="revoke"
        type="danger"
        native-type="button"
        @click="reset"
        >重置</van-button
      >
    </van-row>
  </van-form>
</template>

<script>
import acticle from "../mixins/acticle";
export default {
  mixins: [acticle],
  created() {
    this.getCateList()
  },
};
</script>

<style scoped lang="less">
.tags-popup {
  padding: 0 20px;
  h3 {
    font-size: 30px;
    font-weight: normal;
    line-height: 100px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
  }
}
</style>